<template>
  <div id="cutdown-item-box">
    <span ref="hours" v-text="hours?hours:'00'"></span> : <span ref="minutes" v-text="minutes?minutes:'00'"></span> : <span ref="seconds" v-text="seconds?seconds:'00'"></span>
  </div>
</template>

<script>
export default {
  name: 'CutdownBox',
  props: {
    currSecondsParams: Number
  },
  data: function () {
    return {
      currSeconds: '',
      hours: 0,
      minutes: 0,
      seconds: 0,
      currInterval: null
    }
  },
  destroyed () {
    clearInterval(this.currInterval)
  },
  mounted () {
    let $this = this
    $this.currSeconds = $this.$props.currSecondsParams
    $this.currInterval = setInterval(function () {
      if ($this.currSeconds > 0) $this.currSeconds--
      $this.handlerTimeStr()
    }, 1000)
  },
  methods: {
    setCurrSeconds: function (seconds) {
      this.currSeconds = seconds
    },
    // 处理: 时,分,秒
    handlerTimeStr: function () {
      this.hours = parseInt((this.currSeconds / 3600))
      this.minutes = parseInt((this.currSeconds % 3600) / 60)
      this.seconds = parseInt(this.currSeconds % 60)
      if (this.hours < 10) {
        this.hours = '0' + this.hours
      }
      if (this.minutes < 10) {
        this.minutes = '0' + this.minutes
      }
      if (this.seconds < 10) {
        this.seconds = '0' + this.seconds
      }
    }
  }
}
</script>

<style scoped>
#cutdown-item-box{ display: inline-block; width: 100px; line-height: 20px;}
#cutdown-item-box span{ display: inline-block; padding: 0px 2px; background: #9a6e3a; color: #FFFFFF; border-radius: 3px; text-align: center; text-indent: 0px;}
</style>
